<template>
  <el-dialog class="setting drag-box-none" :title="$t('系统设置')" :visible.sync="visible" width="420px"
    :before-close="onClose">
    <el-form :label-width="currLanguage == 'en-US' ? '100px' : '150px'" ref="settingForm" size="small"
      :label-position="currLanguage == 'en-US' ? 'left' : 'right'">
      <el-form-item :label="$t('语言')">
        <el-select class="select" v-model="language" placeholder="语言" width="100px" @change="changeLanguage"
          style="background-color: none;">
          <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- {{ userInfo }} -->

      <el-form-item prop="sex" :label="$t('自动同意好友申请')">
        <el-radio-group v-model="userInfo.friendAddRestrict" @change="updateFriendAddRestrict">
          <el-radio :label="1">关闭</el-radio>
          <el-radio :label="2">开启</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item :label="$t('通用')">
        <el-button type="primary" @click="clearCache">{{ $t('清空缓存') }}</el-button>
      </el-form-item> -->

    </el-form>

  </el-dialog>
</template>

<script>
import localForage from 'localforage';
import { langcodeOption } from '@/api/common.js'
import {
  updateField,
} from '@/api/userInfo.js'
export default {
  name: 'systemSetting',
  data() {
    return {
      language: null,
      languageList: [],
      userInfo: {},
    }
  },
  mounted() {
    this.getOptions();
    this.userInfo = {...this.$store.state.userStore.userInfo}
  },
  props: {
    visible: {
      type: Boolean
    }
  },
  computed: {
    currLanguage() {
      return localStorage.getItem('locale')
    }
  },
  methods: {
    updateFriendAddRestrict(e) {
      let obj = {
        updateField: 12,
        value: e
      }

      updateField(obj).then(res => {
        this.$message.success(this.$t('修改成功'))
      })
    },
    clearCache() {
      this.$confirm(this.$t('清除缓存将重启应用,是否继续?'))
        .then(_ => {
          sessionStorage.clear();
          localStorage.clear();
          localForage.clear();
          sessionStorage.removeItem("accessToken");
          this.$router.replace("/login");
        })
        .catch(_ => { });
    },
    changeLanguage(e) {
      this.$changeLanguage(e)
    },
    onClose() {
      this.$emit("close");
    },
    getOptions() {
      // 语言列表
      langcodeOption().then(data => {
        // console.log(res)
        const languageList = new Array;
        data.forEach(item => {
          languageList.push({
            label: item.languageName,
            value: item.fileName,
          })
        })
        this.languageList = languageList
        // this.values=fanyig.value
        if (languageList.length > 0 && !this.getLanguage) {
          this.language = languageList[0].value;
          if (this.$i18n.locale) this.language = this.$i18n.locale
        }
      })
    },
  },
}
</script>